{% extends "base.html" %}



{% block css %}
<link rel="stylesheet" href="/static/css/admin.css">
<link rel="stylesheet" href="/static/ztree3/css/bootstrapStyle/bootstrapStyle.css" type="text/css">
{% endblock %}


{% block center %}


<!--头部导航-->
<!--
<div class="panel panel-default center-top" style="min-width:1300px;">
  <div class="panel-body">
    <ol class="breadcrumb" style="margin-bottom: 0px;background-color: #FFFFFF;">
      <li><a href="/" style="color: #377CD8;">首页</a></li>
      <li><a href="javascript:;">系统管理</a></li>
      <li class="active">{{ title }}</li>
    </ol>
  </div>
</div>
-->


<!--用户信息-->
<div class="panel panel-default center-top" style="min-width:1300px;">
  <div class="panel-heading">
      <div class="row" style="padding-top:5px;padding-left:10px;">
           <div class="col-sm-2">

                <ol class="breadcrumb" style="margin-bottom: 0px;">
                  <li><a href="/" style="color: #377CD8;">首页</a></li>
                  <li><a href="javascript:;">系统管理</a></li>
                  <li class="active">{{ title }}</li>
                </ol>

          </div>

          <div class="col-sm-4">

              <div class="input-group">
                  <span class="input-group-addon" ip="{{ ip }}" id="ip" style="color:green">{{ ip }}</span>
                  <input type="text" class="form-control" style="color: #20B320;" id="cur-dir" value="{{ cur_dir }}">

                  <a href="javascript:;" id="cd-dir" class="input-group-addon btn" style="background-color: #337ab7;color: white">跳转</a>

              </div>
          </div>

          <div class="col-sm-4">
              <div class="row">
                  <div class="col-sm-6">
                      <div class="input-group">
                          <input type="file" class="form-control" id="upfile">
                          <a href="javascript:;" id="up-file" class="input-group-addon btn" style="background-color: #5bc0de;color: white">上传</a>
                      </div>
                  </div>

                  <div class="col-sm-6" >
                      <div class="input-group">
                          <input type="text" class="form-control" placeholder="选择文件" style="" id="down-file">

                          <span class="input-group-btn">
                            <button class="btn btn-success" type="button" id="btn-downfile" style="border-radius: 0px;">下载</button>
                          </span>

                          <span class="input-group-btn">
                            <button class="btn btn-danger" type="button" id="btn-remove">删除</button>
                          </span>
						  <span class="input-group-btn">
                            <button class="btn btn-success" type="button" id="btn-edit">编辑</button>
                          </span>
                      </div>

                  </div>
              </div>


          </div>

          <div class="col-sm-2">
              <ol class="breadcrumb" style="margin-bottom: 0px;">
                  <li style="color: orangered">{{ msg }}</li>
                </ol>
          </div>



      </div>

  </div>
  <div class="panel-body">

        <div class="row">
            <div class="col-sm-2" style="max-height:735px;overflow:auto;">

                <ul id="treeDemo" class="ztree"></ul>

            </div>


            <div class="col-sm-10" id="dir-list">

                {% for i in dir_list %}

                {% if i == "dir_reply" %}


                <div style="display: inline-block;width: 200px;margin-top: 20px">
                    <a href="/sys/chdir/{{ ip }}/{{ i }}/" style="text-decoration: none">
                        <div>
                            <i class="fa fa-refresh fa-3x" style="color: #f59e1c"></i>
                        </div>
                        <div>
                            <span style="color: #20B320;word-wrap:break-word;word-break:break-all;"><b>刷新</b></span>
                        </div>

                    </a>
                </div>

                {% elif i == "dir_reback" %}

                <div style="display: inline-block;width: 200px;margin-top: 20px">
                    <a href="/sys/chdir/{{ ip }}/{{ i }}/" style="text-decoration: none">
                        <div>
                            <i class="fa fa-reply fa-3x" style="color: #f59e1c"></i>
                        </div>
                        <div>
                            <span style="color: #20B320;word-wrap:break-word;word-break:break-all;"><b>返回</b></span>
                        </div>

                    </a>
                </div>

                {% else %}

                <div style="display: inline-block;width: 200px;margin-top: 20px">
                    <a href="/sys/chdir/{{ ip }}/{{ i }}/" style="text-decoration: none">
                        <div>
                            <i class="fa fa-folder-open fa-4x" style="color: #f59e1c"></i>
                        </div>
                        <div>
                            <span style="color: #20B320;word-wrap:break-word;word-break:break-all;"><b>{{ i }}</b></span>
                        </div>

                    </a>
                </div>
                {% endif %}

                {% endfor %}

                {% for i in file_list %}
                <div style="display: inline-block;width: 200px;margin-top: 20px">
                    <a href="javascript:;" style="text-decoration: none" name="file-name" filename="{{ i }}">
                        <div>
                            <i class="fa fa-file  fa-3x" style="color: #85af04"></i>
                        </div>
                        <div>
                            <span style="color: #20B320;word-wrap:break-word;word-break:break-all;"><b>{{ i }}</b></span>
                        </div>
                    </a>
                </div>

                {% endfor %}


            </div>

        </div>

  </div>
</div>


{% endblock %}


<!-- Modal -->
{% block modal %}


{% endblock  %}

{% block js %}
<script type="text/javascript" src="/static/ztree3/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/static/ztree3/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="/static/ztree3/js/jquery.ztree.exedit.js"></script>
<script type="text/javascript" src="/static/layer/layer.js"></script>
<script type="text/javascript" >



var setting = {
    view: {
        selectedMulti: false,
    },
    check: {
        enable: false
    },
    data: {
        simpleData: {
            enable: true
        }
    },
    edit: {
        enable: false
    }
};


var zNodes = {{ znodes_data |safe }};

$(document).ready(function(){
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    $("a[class='level1']").click(function(){
        var ip = $(this).attr("title");
        console.log("ip");
        $("#ip").empty();
        $("#ip").append(ip);
        $.post('/sys/cddir/',{'cd_dir':"~",'ip':ip},function (data) {
            $("#dir-list").empty();
            $("#dir-list").append(data);
        })
    });
});





//切换目录
$("#cd-dir").click(function () {
    var cd_dir=$("#cur-dir").val();
    var ip = $("#ip").attr("ip");
    $.post('/sys/cddir/',{'cd_dir':cd_dir,'ip':ip},function (data) {


            $("#dir-list").empty();
            $("#dir-list").append(data);

    })

});





$('#up-file').click(function(){
    var formData = new FormData();

    formData.append("ip", ip);

    upfile = $("#upfile").get(0).files[0];
    if(upfile){
        formData.append("upfile",upfile);
        $.ajax({
             url: "/sys/pushfile/",
             type: "POST",
             processData: false,
             contentType: false,
             data: formData,
             success: function(msg) {

                 alert(msg);

             }
        });
    }else{
        alert("请选择上传文件")
    }

});



$("body").on('click', "a[name='file-name']", function () {

    var filename=$(this).attr('filename');

    $("#down-file").val(filename);

    $('#btn-remove').attr('filename',filename);
    $('#btn-downfile').attr('filename',filename);
	$('#btn-edit').attr('filename',filename);

});



$('#btn-remove').click(function(){

    var formData = new FormData();
    var filename=$(this).attr('filename');

    formData.append("filename", filename);

    if(filename){
        $.ajax({
             url: "/sys/removefile/",
             type: "POST",
             processData: false,
             contentType: false,
             data: formData,
             success: function(msg) {
                    alert(msg)

             }
        });
    }else{
        alert("文件不能为空")
    }

});


$('#btn-downfile').click(function(){

    var formData = new FormData();
    var filename=$(this).attr('filename');

    formData.append("filename", filename);

    if(filename){
        $.ajax({
             url: "/sys/downfile/",
             type: "POST",
             processData: false,
             contentType: false,
             data: formData,
             success: function(msg) {

                    window.location.href=msg

             }
        });
    }else{
        alert("文件不能为空")
    }

});



$('#btn-edit').on('click', function(){
	var filename=$(this).attr('filename');
	var ip = $("#ip").text();
	var cd_dir=$("#cur-dir").val();
	if(!filename || filename.length == 0){
		layer.msg('文件不能为空');
		return;
	}else{
	
	}
	layer.open({
		type: 2,
		title: '在线编辑' + '【'+ip+'】'+ cd_dir +'/'+ filename,
		maxmin: true,
		shadeClose: false, //点击遮罩关闭层
		area : ['800px' , '520px'],
		scrollbar: false,
		maxHeight:'520px',
		content: '/sys/editfile/?ip=' + ip + '&cd_dir=' + cd_dir + '&filename='+filename
	});
});
</script>

{% endblock %}


